import React from "react"
import { Form, Input, Button } from 'antd';
import "./Login.css";
import {inject,observer} from "mobx-react";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
@inject("user")
@observer
class Login extends React.Component {
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values);

        this.props.user.login(values).then((res)=>{
            console.log(1)
            console.log(res)
            //直接跳转页面
            this.props.history.push("./home")
        }).catch((err)=>{
            console.log(err)
            alert("登录出错")
        })
    };
    onFill = () => {
       // 跳转路由到忘记密码页面
    };

    render() {
        return (
            <div className="loginForm">
                <hgroup>
                    <h1>后台管理系统</h1>
                    <h2>登录</h2>
                </hgroup>
                <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>
                    {/*用户名*/}
                    <Form.Item
                        name="user"
                        label="用户名"
                        rules={[
                            {
                                required: true,
                            },
                        ]}>
                        <Input />
                    </Form.Item>
                    {/*密码*/}
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            {
                                required: true,
                            },
                        ]}>
                        <Input.Password />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                        <Button type="link" htmlType="button" onClick={this.onFill}>
                            忘记密码
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export {Login as default}